<template>
    <div class="goods">
        <ul class="left">
            <li v-for="(item, index) in goods" :key="item.name">
                <a :href="`#${index}`">{{ item.name }}</a>
            </li>
        </ul>
        <ol class="right">
            <li v-for="(item, index) in goods" :key="item.name" :id="index">
                <h3>{{ item.name }}</h3>
                <ul>
                    <li v-for="food in item.foods" :key="food.name">
                        <div class="box">
                            <div class="img">
                                <img :src="food.image" alt="">
                            </div>
                            <div class="text">
                                <h4>{{ food.name }}</h4>
                                <p class="p1">{{ food.description }}</p>
                                <p class="p2">
                                    <span class="sp1">月售{{ food.sellCount }}</span>
                                    <span class="sp2">好评率{{ food.rating }}%</span>
                                </p>
                                <p class="p3">
                                    <span class="sp3">￥{{ food.price }}</span>
                                    <del class="sp4" v-show="food.oldPrice">￥{{ food.oldPrice }}</del>
                                </p>
                            </div>
                            <!-- 公共组件Btns:item是操作的food对象type方便判断是否需要定位样式 -->
                            <div class="btns"><Btns :item="food" type="0"></Btns></div>
                        </div>
                    </li>
                </ul>
            </li>
        </ol>
        <div class="shopCar" @click="showCar">
            <div><img src="../../img/car.jpg" alt=""></div>
            <div>￥{{ getPrice }}</div>
            <div>另需配送费￥4元</div>
            <div>￥20起送</div>
        </div>
    </div>

</template>

<script>
import { mapActions, mapState } from 'vuex';
import Btns from './btns.vue';


export default {
    components: {
        Btns,
    },
    created() {
        this.getGoods();
    },

    computed: {
        ...mapState(["goods", "price", "carList"]),
        //计算总价
        getPrice() {
            let num = 0;
            this.carList.forEach((item) => {
                num += item.price * item.count;
            });
            return num;
        },
    },
    methods: {
        ...mapActions(["getGoods"]),
        //展示购物车列表
        showCar() {
            this.$store.commit("showCar");
        },
    },


}
</script>

<style scoped>
.goods {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.box img {
    width: 60px;
    height: 60px;
}

.img {
    margin-right: 10px;
}

.box {
    display: flex;
    position: relative;
    margin: 18px 10px 18px 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgb(7, 17, 27, 0.1);
    
}

.box h4 {
    font-size: 14px;
    font-weight: 700;
}

.box .p1,
.p2 {
    font-size: 10px;
    line-height: 20px;
    color: rgb(147, 153, 159);
}

.box .sp1,
.sp3 {
    margin-right: 12px;
}

.box .sp3 {
    font-size: 14px;
    color: rgb(240, 20, 20);
    font-weight: 700;
}

.sp4 {
    font-size: 10px;
    color: gray;
}

.left {
   width: 21.333vw;
   height: 70vh;
overflow-y: scroll;
background: #f3f5f7;
padding: 0 12px;
}

.left li {
    padding: 12px 12px 0 12px;
    height: 42px;
    /* padding:  px 0px ; */
    font-size: 12px;
    color: gray;
    border-bottom:solid 1px rgb(7, 17, 27, 0.1);
}

.left li a{
    color: gray;
}
.right {
    flex: 1;
    overflow-y: scroll;
    height: 70vh;

}
.text{
    margin-right: 10px;
}

.right h3 {
    font-size: 12px;
    line-height: 26px;
    font-weight: 200;
    color: rgb(147, 153, 159);
    background-color: #f3f5f7;
    padding-left: 14px;
    border-left: 3px solid #d9dde1;
}

.shopCar {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #141d27;
    z-index: 200;
    color: rgb(255, 255, 255, 0.4);
}

.shopCar img {
    width: 60px;
    position: absolute;
    left:10px;
    top: -15px;
}

.shopCar div:nth-child(2){
   
    font-size: 20px;
    color: rgb(255, 255, 255, 0.4);
    line-height: 50px;
    padding: 0 12px;
    border-right: 1px solid rgb(255, 255, 255, 0.4);
    margin-left: 70px;
    line-height: 50px;
}
.shopCar div:nth-child(3){
    font-size: 16px;
    color: rgb(255, 255, 255, 0.4);
    line-height: 40px;
    padding: 0 12px;
    line-height: 50px;
    
}
.shopCar div:nth-child(4){
    font-size: 16px;
    font-weight:700;
    color: rgb(255, 255, 255, 0.4);
    line-height: 40px;
    padding: 0 12px;
    background-color: rgb(255, 255, 255, 0.1);
    flex: 1;
    line-height: 50px;
    
}
.left ul>li a {
    color: black;
    text-decoration: none;
}

.left li a.router-link-exact-active {
    color: red;
}
</style>